import React from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';

import { Icon, message, Button, Modal } from 'antd';

import './index.scss'

// import Draggable from 'react-draggable'; // The default
// import {DraggableCore} from 'react-draggable'; // <DraggableCore>
import Draggable, { DraggableCore } from 'react-draggable'; // Both at the same time

//字符串转base64
function encode(str) {
	// 对字符串进行编码
	var encode = encodeURI(str);
	// 对编码的字符串转化base64
	var base64 = btoa(encode);
	return base64;
}

// base64转字符串
function decode(base64) {
	// 对base64转编码
	var decode = atob(base64);
	// 编码转字符串
	var str = decodeURI(decode);
	return str;
}


@inject('baseStore')
@observer
export default class App extends React.Component {

	constructor(props) {

		super(props)

		this.state = {
			scale: 1,
			lock: false
		};
	}

	pageChangeNoticeToServer = (img_url) => {
		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "page_change",
				content: "/img_show/" + img_url
			}
		};
		//给服务端发送 sendMsg事件名的消息
		this.props.baseStore.socketData.socket.emit("teach_app_to_server", data);
	}

	componentDidMount() {

		this.props.baseStore.topHeader.show = true;
		this.props.baseStore.topHeader.title = "作品临摹";
		this.props.baseStore.topHeader.backTo = '/entry_04';

		var img_url = this.props.match.params.img_url;

		this.pageChangeNoticeToServer(img_url)
		this.props.baseStore.socketData.currentReactView = this;

		//img_url = 'http://www.szwuyun.cn:1001/images/theme/SoftPen/xiling/grade4s/class3/jz2.png';
		console.log(decode(img_url), "==========decode==========");

		


		this.setState({
			img_url: decode(img_url)
		})

		var that = this;

		document.querySelector('.box').addEventListener('mousewheel', function (e) {


			var scale = that.state.scale;
			if (e.deltaY > 0) {
				scale = scale - 0.02;
			} else {
				scale = scale + 0.02;
			}

			that.toScale(scale);

			console.log(e, "============e===============");
		});
	}

	toScale = (value) => {


		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'toScale',
				param: [value]
			}
		});

		this.setState({
			scale: value
		})


	}

	lockToggle(b) {

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'lockToggle',
				param: [b]
			}
		});

		this.setState({ lock: b })
	}

	onStart = () => {
		this.setState({ activeDrags: ++this.state.activeDrags });
	};

	onStop = () => {
		this.setState({ activeDrags: --this.state.activeDrags });
	};

	render() {
		const dragHandlers = { onStart: this.onStart, onStop: this.onStop };
		var scale = this.state.scale;
		return (
			<div className="img_show_contianer">
				<Draggable {...dragHandlers}>
					<div className="box">
						<img style={{ transform: `scale(${scale})` }} draggable={false} src={this.state.img_url} alt="" />
					</div>
				</Draggable>

				{
					this.state.lock && <div className="img_show_mask"></div>
				}

				{
					this.state.lock && <div className="img_show_lock" onClick={() => { this.lockToggle(false) }}>
						关闭锁屏
					</div>
				}

				{
					!this.state.lock && <div className="img_show_lock" onClick={() => { this.lockToggle(true) }}>
						开启锁屏
					</div>
				}

			</div>
		);
	}
}